<template>
  <div class="app-container">
    <el-form
      class="searchform"
      @submit.native.prevent
      :model="queryParams"
      ref="queryParams"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="单位">
            <m-select
              v-model="queryParams.entrustOrganizationId"
              placeholder="输入文字检索查询"
              style="width: 100%"
              filterable
              clearable
              :lists="organizationList"
              lists_label="organizationName"
              lists_value="entrustOrganizationId"
              lists_key="entrustOrganizationId"
              :total="orgTotal"
              :pageSize="10"
              @handleChange="listeningEvent"
            >
            </m-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="快递状态">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择快递状态"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.express_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="寄出日期">
            <el-date-picker
              v-model="queryParams.formDateReceive"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              clearable
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="tableoperation" style="display: flex; justify-content: right">
      <el-button
        type="primary"
        icon="el-icon-download"
        size="mini"
        plain
        @click.native.prevent="handleExport()"
        style="margin-right: 8px"
        >导出</el-button
      >
      <print
        :disabled="dataList.length == 0"
        :title="title"
        :beforeMethod="beforeMethod"
      >
        <table
          id="table"
          style="width: 100%"
          border="1"
          cellspacing="0"
          cellpadding="0"
          align="center"
        >
          <thead>
            <!-- <tr>
              <td colspan="7" style="text-align: left; padding-left: 20px;">
            		<span >收样人签名：</span>
            	</td>
            </tr> -->
            <tr>
              <!-- <td align="center">快递单号</td> -->
              <td align="center">单位名称</td>
              <td align="center">单位地址</td>
              <td align="center">联系人</td>
              <td align="center">联系电话</td>
              <td align="center">类型</td>
            </tr>
          </thead>
          <tr v-for="(item, index) in printList" :key="index">
            <!-- <td width="15%" align="center">{{ item.expressBill }}</td> -->
            <td align="center">{{ item.organizationName }}</td>
            <td align="center">{{ item.organizationAddress }}</td>
            <td width="8%" align="center">{{ item.dosageContactsName }}</td>
            <td width="12%" align="center">{{ item.dosageContactsMobile }}</td>
            <td align="center">
              <dict-tag
                :value="item.type"
                :options="dict.type.express_status"
              ></dict-tag>
            </td>
          </tr>
        </table>
      </print>
    </div>
    <!-- <div v-if="title" style="margin:-25px 0 15px ;font-size: 20px;font-weight: bold;width: 100%;text-align: center;">{{title}}</div> -->
    <el-table
      v-loading="loading"
      :height="height - 400 + 'px'"
      :data="dataList"
    >
      <!-- <el-table-column label="快递单号" align="center" prop="expressBill" :show-overflow-tooltip="true"/> -->
      <el-table-column
        label="单位名称"
        align="center"
        prop="organizationName"
        width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="单位地址"
        align="center"
        prop="organizationAddress"
      />
      <el-table-column
        label="联系人(剂量计)"
        align="center"
        prop="dosageContactsName"
      />
      <el-table-column
        label="联系电话(剂量计)"
        align="center"
        prop="dosageContactsMobile"
      />
      <el-table-column label="类型" align="center">
        <template slot-scope="{ row }">
          <dict-tag
            :value="row.type"
            :options="dict.type.express_status"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="寄出时间" align="center">
        <template slot-scope="{ row }">
          {{ parseTime(row.createTime, "{y}-{m}-{d}") }}
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  expressDeliveryList,
  expressDeliveryPrint,
} from "@/api/form/expressStatistics";
import { entrustOrganizationList } from "@/api/person/entrustOrganization";
import MSelect from "@/components/mSelect";

export default {
  name: "User",
  components: { MSelect },
  directives: {
    print,
  },
  dicts: ["express_status"],
  data() {
    return {
      // 表单参数
      form: {},
      title: "快递寄出详细信息",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        formDateReceive: [],
      },
      // 视图高度
      height: document.documentElement.clientHeight,
      imageUrlT: "",
      // 列表数据
      dataList: [],
      total: 0,
      dialogVisible: false,
      status: "",
      // 单位下拉框
      organizationList: [],
      // 单位查询数据
      organizationQueryData: {
        organizationName: "", //单位名称模糊查询
        pageNum: 1, //页码
        pageSize: 10, //每页展示的条数
      },
      orgTotal: 0,
      printList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async beforeMethod() {
      if (this.queryParams.formDateReceive) {
        this.queryParams.createTimeStart = this.queryParams.formDateReceive[0];
        this.queryParams.createTimeEnd = this.queryParams.formDateReceive[1];
      } else {
        this.queryParams.createTimeStart = null;
        this.queryParams.createTimeEnd = null;
      }
      let queryParams = {
        ...this.queryParams,
        pageNum: 1,
        pageSize: this.total,
      };
      delete queryParams.formDateReceive;
      let response = await expressDeliveryPrint(queryParams);
      this.printList = response.data;
    },
    // 获取列表
    getList() {
      console.log("this.queryParams", this.queryParams);
      this.loading = true;
      if (this.queryParams.formDateReceive) {
        this.queryParams.createTimeStart = this.queryParams.formDateReceive[0];
        this.queryParams.createTimeEnd = this.queryParams.formDateReceive[1];
      } else {
        this.queryParams.createTimeStart = null;
        this.queryParams.createTimeEnd = null;
      }
      let queryParams = { ...this.queryParams };
      delete queryParams.formDateReceive;
      expressDeliveryList(queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch((response) => {
          this.loading = false;
        });
    },
    // 获取单位下拉框
    listeningEvent(e) {
      let { queryName, pageNum, pageSize, type } = e;
      if (type == "scroll" && pageNum == this.organizationQueryData.pageNum)
        return;
      this.organizationQueryData.organizationName = queryName;
      this.organizationQueryData.pageNum = pageNum;
      this.organizationQueryData.pageSize = pageSize;
      entrustOrganizationList(this.organizationQueryData).then((response) => {
        if (type == "scroll") {
          this.organizationList.push(...response.rows);
        } else {
          this.organizationList = response.rows;
        }
        this.orgTotal = response.total;
      });
    },
    // 导出
    handleExport() {
      this.download(
        "/statistics/expressDelivery/export",
        {
          ...this.queryParams,
        },
        `快递列表.xlsx`
      );
    },
    // 查询重置
    reset() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        this.resetForm("queryParams");
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .addDialogr {
  .el-form {
    margin-left: -30px;
  }
}
::v-deep .searchform {
  margin-left: -30px;
}
#table-container {
  #table {
    td {
      padding: 5px;
      text-align: center;
    }
  }
}
</style>
